<template>
	<view class="box-c  page">
		<scroll-view scroll-y="true" :style="{height:height+'px'}">
			<!-- 图片 -->
			<view class="info-image">
				<image :src="activityInfo.logo" mode=""></image>
			</view>
			<!-- 标题地址 -->
			<view class="list-2 pt-2 px-2">
				<view class="title text-heide-2">
					{{activityInfo.title}}
				</view>
				<view class="py-2 box describe">
					<text class="iconfont icondingwei mr-1"></text>
					<text>
						<text
							class="text-heide-1">{{activityInfo.province}}{{activityInfo.city}}{{activityInfo.district}}{{activityInfo.address}}</text>
					</text>
				</view>
			</view>
			<!-- 活动报名团队 -->
			<view class="list-3 box-c mt-2 p-2">
				<view class="team-title px-3">
					选择报名团队
				</view>
				<view class="box">
					<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="0" style="height: 360rpx;">
						<view v-if="unityList.length>0" @tap='handleApply(item)'
							class="box-c scroll-view-item_H mr-2 p-2" v-for="(item,index) in unityList">
							<view class="team-image">
								<image :src="item.logo" mode=""></image>
							</view>
							<view class="box-c">
								<text class="team-name">
									{{item.name}}
								</text>
								<view class="team-describe mt-3 box d-jc-sb">
									<text class="text-heide-1">团长:{{item.userName}}</text>
									<!-- 未报名 -->
									<text v-if='item.applyFlag<=0'>
										<text>{{item.applyNumber}}人报名</text>
									</text>
									<text v-if="item.applyFlag>0">
										<!-- 已报名 -->
										<text v-if="item.applyStatus==0" class="already-appley">已报名</text>
										<text v-if="item.applyStatus==1" class="already-appley">审核中</text>
										<text v-if="item.applyStatus==2" class="already-appley">拒绝</text>
									</text>
								</view>
							</view>

						</view>
						<view class="null box-c d-ai-c" v-if="unityList.length<1">
							<view class="">
								<image src="../../static/images/activity/tuandui@2x.png" mode=""></image>
							</view>
							<view class="describe">
							此活动还没有任何团队~
							</view>
						</view>

					</scroll-view>


				</view>

			</view>
			<!-- 活动详情分界线 -->
			<view class="box list-4 d-ai-c d-jc-c my-2">
				<text class="line"></text>
				<text class="mx-2 title">活动详情</text>
				<text class="line"></text>

			</view>
			<!-- 活动详情内容 -->
			<view class="list-5 p-2">
				<rich-text :nodes="activityInfo.content"></rich-text>

			</view>
		</scroll-view>
		<view class="Joinactivity" v-if="userInfo.userInfo.roles.includes('activity_unity_leader')===true" @tap="Joinactivity">加入此活动</view>
		<!-- 弹窗 -->
		<bestPaymentPassword :forget=false ref="paymentPassword" mode=1 digits="6" @submit="checkPwd">
		</bestPaymentPassword>
		<!-- 选择团队弹框 -->
		<wybPopup ref="popup" type="bottom">
			<view>
					<view class="popup">
						<view class="pop-t">
							请选择您要报名此活动的团队
						</view>
						<scroll-view scroll-y="true" :style="{height: POPHeight+'px'}">
						 <radio-group @change="radioChange">
							<label class="uni-lab" v-for="(item, index) in Myteam" :key="index">
								<view class="box d-jc-sb d-ai-c">
									<image class="teamImg" :src="item.logo" mode=""></image>
									<view class="">
										{{item.name}}
									</view>
								</view>
								<view>
								    <radio :value="item.id+''"  />

								</view>
							</label>
						 </radio-group>	
						</scroll-view>		
						<button class="Surejoin" @tap="Surejoin" >
							确定
						</button>
					</view>			
			</view>
				
		</wybPopup>

	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import bestPaymentPassword from '../../components/sanshui-payment-password/index.vue'
	import wybPopup from '@/components/wyb-popup/wyb-popup.vue'
	export default {
		computed: mapState(['loginState', 'userInfo']),
		components: {
			bestPaymentPassword,
			wybPopup
		},
		data() {
			return {
				strings: "",
				passwordFlag: false,
				password: "",
				id: 1,
				activityInfo: {}, //活动信息
				unityList: [], //团列表
				unityId: '',
				height: 500,
				POPHeight:290,
				current: 0,
				Myteam:'',
				activityUnityId:'',
				activityId:'',
				teamId:''

			};
		},
		onReady() {
			let that = this;
			uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
				success(res) { //成功回调函数
					that.height = res.windowHeight //windoHeight为窗口高度，主要使用的是这个

				}
			})
		},
		onLoad(parameter) {
			if (parameter.id !== undefined && parameter.id !== null) {
				this.id = parameter.id
			}
			this.getActivityInfo()
			this.getListUnity()
		},
		methods: {
			getListUnity() {
				//获取团队列表
				let _this = this
				this.$api.getListUnity({
					id: this.id,
					type: 1
				}).then((res => {
					_this.unityList = res.data.dataMap
				}))

			},
			//活动详情
			getActivityInfo() {
				let _this = this
				this.$api.getActivityInfo({
					id: _this.id,
				}).then((res) => {
					_this.activityInfo = res.data.dataMap
					console.log(_this.activityInfo)
					_this.activityId = _this.activityInfo.id
				})
			},
			handleApply(data) {
				console.log(data)
				if (data.applyFlag == 0) {
					//未报名
					this.$refs.paymentPassword.modalFun('show');
					this.unityId = data.id
				} else {
					uni.showToast({
						title: "您已经报名此团队了，看看其他的吧！",
						duration: 2000,
						icon: 'none',
					});
				}


			},
			togglePayment() {

			},
			//校验密码
			checkPwd(e) {
				this.$api.applyUnity({
					unityId: this.unityId,
					password: e.value,
					type:1
				}).then((res) => {
					if (res.data.success) {
						uni.showToast({
							title: "报名成功，等待审核！",
							duration: 2000,
							icon: 'none',
						});
						this.getListUnity()
					} else {
						uni.showToast({
							title: res.data.message,
							duration: 2000,
							icon: 'none',
						});
					}

				})

			},
			//获取我创建的团队列表
			mycreateTeam(){
				this.$api.mycreateTeam({
					type:1
				}).then((res) => {
					if (res.data.code == 200) {
						console.log(res.data.dataMap)
						this.Myteam = res.data.dataMap
						
					}
				})
			},
			Joinactivity(){
				this.$refs.popup.show()
				this.mycreateTeam()
			},
			radioChange: function(e) {
				var that = this
				    console.log(e.detail.value);
				that.activityUnityId = e.detail.value 
			 },
			 Surejoin(){
				 this.$api.bindactivity({
					 activityUnityId:this.activityUnityId,
					 activityId:this.activityId
				 }).then((res) => {
				 	if (res.data.code == 200) {
				 		console.log(res.data.dataMap)
						this.$refs.popup.hide()
				 		uni.showToast({
				 			title: '选择成功,等待审核',
				 			duration: 2000,
				 			icon: 'none',
				 		});
				 	}else{
						uni.showToast({
							title: res.data.message,
							duration: 2000,
							icon: 'none',
						});
					}
				 })
			 },
		}
	}
</script>

<style lang="less">
	.null {
		image {
			width: 250rpx;
			height: 250rpx;
		}
		.describe{
			color: #ababab;
			font-size: 24rpx;
		}

	}

	.list-5 {
		background-color: #fff;
		min-height: 50rpx;
	}

	.list-4 {
		.title {
			color: #AAAAAA;
		}

		.line {
			width: 60rpx;
			background-color: #CCCCCC;
			height: 1px;
			border-radius: 10rpx;
		}
	}

	.list-3 {
		background-color: #fff;

		.team-name {
			color: #FF7E51;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;

		}

		.team-describe {
			color: #FF7E51;
			font-size: 24rpx;

			.already-appley {
				color: #8F8F8F;
				font-weight: bold;
			}
		}

		.team-image {
			image {
				width: 250rpx;
				height: 190rpx;
				border-radius: 8rpx;
			}
		}

		.team-title {
			margin: 40rpx auto;
			background-color: #FF9C59;
			color: #fff;
		}
	}

	.list-2 {
		background-color: #fff;

		.describe {
			color: #FF7E51;
		}

		.title {
			font-weight: bold;
			font-size: 32rpx;
			line-height: 40rpx;
		}


	}

	.info-image {
		image {
			height: 400rpx;
		}
	}

	.page {
		background-color: #F8F8F8;
		height: 100%;
	}

	/deep/.uni-scroll-view::-webkit-scrollbar {
		display: none
	}

	.scroll-view-item_H {
		width: 250rpx;
		height: 320rpx;
		display: inline-block;
		font-size: 28rpx;
		background: #FFE0D1;
		border-radius: 8rpx;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}
	.Joinactivity{
		width: 750rpx;
		height: 100rpx;
		background: #FF5551;
		position: fixed;
		bottom: 0;
		font-size: 32rpx;
		font-weight: bold;
		color: #FFFFFF;
		text-align: center;
		line-height: 100rpx;
	}
	.popup {
		width: 750rpx;
		height: 785rpx;
		background: #FFFFFF;
		border-radius: 60rpx 60rpx 0rpx 0rpx;
		overflow: hidden;
	}
	.pop-t{
		width: 750rpx;
		height: 70rpx;
		font-size: 32rpx;
		line-height: 70rpx;
		font-weight: 500;
		color: #666666;
		text-align: center;
		margin-top: 30rpx;
	}
	.uni-lab{
		width: 670rpx;
		height: 120rpx;
		padding-left: 20rpx;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.teamImg{
		width: 120rpx;
		height: 80rpx;
		border-radius: 12rpx;
		margin-right: 14rpx;
	}
	.Surejoin{
		width: 670rpx;
		height: 88rpx;
		position: fixed;
		bottom: 30rpx;
		left: 5%;
		background: #FF5551;
		border-radius: 44rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #FFFFFF;
		margin-top: 50rpx;
	}
</style>
